<template>
  <div class="container">
      <div id="particles-js"></div>

      <div class="content">
          <div class="glitch-wrapper">
              <div class="glitch" data-text="404">维护中...</div>
          </div>

          <h1 class="neon-text">该页面正在维护中</h1>

          <el-button type="primary" @click="goHome()" class="hover-glow">
              <span class="button-text">返回安全地带</span>
          </el-button>

          <div class="matrix-rain"></div>
      </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { gsap } from 'gsap'
import 'particles.js'
import router from '@/router/index.js'
import { ElLoading } from 'element-plus'


// 粒子配置
const particlesConfig = {
  particles: {
      number: { value: 80, density: { enable: true, value_area: 800 } },
      color: { value: "#ffffff" },
      shape: { type: "circle" },
      opacity: { value: 0.5, random: false },
      size: { value: 3, random: true },
      line_linked: {
          enable: true,
          distance: 150,
          color: "#ffffff",
          opacity: 0.4,
          width: 1
      },
      move: {
          enable: true,
          speed: 6,
          direction: "none",
          random: false,
          straight: false,
          out_mode: "out",
          bounce: false
      }
  },
  interactivity: {
      detect_on: "canvas",
      events: {
          onhover: { enable: true, mode: "repulse" },
          onclick: { enable: true, mode: "push" },
          resize: true
      }
  }
}
const initParticles = () => {
  if (typeof window !== 'undefined' && window.particlesJS) {
      particlesJS('particles-js', particlesConfig)
  }
}

// 初始化动画
onMounted(() => {
  if (window.pJSDom && window.pJSDom.length > 0) {
      window.pJSDom[0].pJS.fn.vendors.destroy();
  }

  gsap.from(".glitch", {
      duration: 2,
      scale: 0.5,
      rotation: 360,
      ease: "elastic.out(1, 0.3)"
  })

  gsap.to(".neon-text", {
      duration: 1.5,
      textShadow: "0 0 10px #00f7ff, 0 0 20px #00f7ff, 0 0 30px #00f7ff",
      repeat: -1,
      yoyo: true
  })
})

// 清理
onUnmounted(() => {
  if (window.pJSDom && window.pJSDom.length > 0) {
      window.pJSDom[0].pJS.fn.vendors.destroy()
  }
})

const goHome = async () => {
  let loading;  // 定义 loading 变量

  try {
      // 显示加载状态
      loading = ElLoading.service({
          lock: true,
          text: '正在传送回主页...',
          background: 'rgba(0, 0, 0, 0.7)'
      })

      // 添加延迟确保loading可见
      await new Promise(resolve => setTimeout(resolve, 500))

      // 执行导航
      const result = await router.push('/')

      // 处理重定向结果
      if (result?.name === 'Home') {
          console.log('导航成功')
      }
  } catch (err) {
      ElMessage.error(`导航失败: ${err.message}`)
      // 回退方案
      window.location.href = '/'
  } finally {
      // 确保 loading 被正确关闭
      if (loading) {
          loading.close()
      }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.89) 0%, rgba(0, 0, 0, 0) 70%);
  overflow: hidden;
  position: relative;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}

.glitch-wrapper {
  position: relative;
}

.glitch {
  font-size: 0.2rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  animation: glitch 3s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 3px;
  text-shadow: -3px 0 #ff00ff;
  animation: glitch-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -3px;
  text-shadow: 3px 0 #00ffff;
  animation: glitch-2 2s infinite linear alternate-reverse;
}

.neon-text {
  color: #fff;
  font-size: 0.2rem;
  margin: 0.2rem 0;
  text-align: center;
}

.hover-glow {
  transition: all 0.3s;
  background: transparent;
  border: 2px solid #00f7ff;
}

.hover-glow:hover {
  box-shadow: 0 0 15px #00f7ff;
  transform: scale(1.1);
}

.button-text {
  position: relative;
  z-index: 1;
  color: #00f7ff;
}

@keyframes glitch {
  2% {
      transform: translate(2px, 0) skew(0deg);
  }

  4% {
      transform: translate(-2px, 0) skew(0deg);
  }

  96% {
      transform: translate(0, 0) skew(0deg);
  }
}

@keyframes glitch-1 {
  0% {
      clip-path: inset(20% 0 30% 0);
  }

  100% {
      clip-path: inset(10% 0 40% 0);
  }
}

@keyframes glitch-2 {
  0% {
      clip-path: inset(40% 0 10% 0);
  }

  100% {
      clip-path: inset(30% 0 20% 0);
  }
}
</style>